<template>
  <el-container class="manage-container">
    <el-header class="manage-header">
      <div>智能车库管理系统</div>
      <div style="position:fixed;right:20px;">
        <span>wkw</span>
        <el-dropdown>
          <i class="el-icon-arrow-down" style="margin-left: 15px;color:white;"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/">退出登陆</router-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-container class="manage-container">
      <el-aside width="200px">
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          background-color="#26384d"
          text-color="#ffffff"
          router
        >
          <el-submenu index="userManage">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="userList">用户列表</el-menu-item>
          </el-submenu>
          <el-menu-item index="garageManage">
            <i class="el-icon-school"></i>
            <span slot="title">车库/车道管理</span>
          </el-menu-item>
          <el-submenu index="carManage">
            <template slot="title">
              <i class="el-icon-truck"></i>
              <span slot="title">车辆管理</span>
            </template>
            <el-menu-item index="carList">车辆列表</el-menu-item>
            <el-menu-item index="throughRecords">出入库记录</el-menu-item>
          </el-submenu>
          <el-menu-item index="remoteManage">
            <i class="el-icon-mobile-phone"></i>
            <span slot="title">遥控器管理</span>
          </el-menu-item>
          <el-submenu index="chargeManage">
            <template slot="title">
              <i class="el-icon-coin"></i>
              <span slot="title">收费管理</span>
            </template>
            <el-menu-item index="charge">收费</el-menu-item>
            <el-menu-item index="chargeRecords">收费记录</el-menu-item>
          </el-submenu>
          <el-menu-item index="setting">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
          <el-menu-item index="statistical">
            <i class="el-icon-s-data"></i>
            <span slot="title">统计报表</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import HeadTop from "../components/HeadTop";
export default {
  components: {
    HeadTop
  },
  computed: {
    defaultActive: function() {
      return this.$route.path.replace("/", "");
    }
  },
  methods: {
    // signOut() {
    //   alert("sign out");
    //   this.$router.push("login");
    // }
  }
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
  min-height: 400px;
}
.manage-container {
  height: -webkit-calc(100vh - 60px);
  height: -moz-calc(100vh - 60px);
  height: calc(100vh - 60px);
}
.manage-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #347bba;
  color: white;
}
</style>
